import React, { Component } from 'react'
import { Link } from 'react-router-dom'

//导入axios优化组件
import { API } from '../../utils/api'
//导入导航栏组件
import NavHeader from '../../components/NavHeader'
import HouseItem from '../../components/HouseItem'
//导入轻提示组件
import { Toast } from 'antd-mobile'
//导入环境变量的值
import { BASE_URL } from '../../utils/url'

import styles from './index.module.css'

const labelStyle = {
  color: 'rgb(255,255,255)',
  cursor: 'pointer',
  border: '0px solid rgb(255,0,0)',
  whiteSpace: '12px',
  fontSize: '12px',
  textAlign: 'center',
}

export default class Map extends Component {
  state = {
    //小区房源数据
    housesList: [],
    //是否展示小区房源列表
    isShowList: false,
  }
  //初始化地图对象
  initMap = () => {
    //获取定位城市
    const { label, value } = JSON.parse(
      window.localStorage.getItem('hkzf_city')
    )
    //创建百度地图对象
    const map = new window.BMapGL.Map('container')
    //存储在this上
    this.map = map
    //创建地址解析器实例
    var myGeo = new window.BMapGL.Geocoder()
    // 将地址解析结果显示在地图上，并调整地图视野
    myGeo.getPoint(
      label,
      async (point) => {
        if (point) {
          map.centerAndZoom(point, 11)
          // 添加比例尺控件
          map.addControl(new window.BMapGL.ScaleControl())
          // 添加缩放控件
          map.addControl(new window.BMapGL.ZoomControl())
          //调用renderOverlays方法
          this.renderOverlays(value)
        }
      },
      label
    )
    //添加移动事件
    map.addEventListener('movestart', () => {
      if (this.state.isShowList) {
        this.setState({
          isShowList: false,
        })
      }
    })
    map.centerAndZoom(window.point, 15)
  }

  //获取覆盖物数据
  renderOverlays = async (value) => {
    try {
      //开启Loading
      Toast.loading('Loading...', 0, null, false)
      //获取数据
      const res = await API.get('/area/map', {
        params: {
          id: value,
        },
      })
      //关闭Loading
      Toast.hide()
      //获取类型和缩放级别
      const { nextZomm, type } = this.getTypeAndZoom()

      //创建覆盖物
      res.data.body.forEach((item) => {
        this.createOverlays(item, nextZomm, type)
      })
    } catch (error) {
      Toast.hide()
    }
  }

  //创建覆盖物
  createOverlays = (item, nextZomm, type) => {
    const {
      coord: { longitude, latitude }, //经纬度
      label: areaName, //名称
      value, //key值
      count, //数量
    } = item

    //获取每个经纬度
    const areaPoint = new window.BMapGL.Point(longitude, latitude)

    if (type === 'circle') {
      //区 镇
      this.createCircle(areaPoint, areaName, value, count, nextZomm)
    } else {
      //小区
      this.createRect(areaPoint, areaName, value, count)
    }
  }

  //创建区、镇覆盖物
  createCircle = (areaPoint, areaName, value, count, nextZomm) => {
    //创建文本标注对象
    var label = new window.BMapGL.Label('', {
      position: areaPoint, // 指定文本标注所在的地理位置
      offset: new window.BMapGL.Size(-35, -35), // 设置文本偏移量
    })

    //设置房源覆盖物内容
    label.id = value

    //设置房源覆盖物内容
    label.setContent(`
         <div class="${styles.bubble}">
           <p class="${styles.name}">${areaName}</p>
           <p>${count}套</p>
         </div>
       `)

    // 自定义文本标注样式
    label.setStyle(labelStyle)
    //添加点击事件
    label.addEventListener('click', () => {
      //添加renderOverlays
      this.renderOverlays(value)
      //放大地图
      this.map.centerAndZoom(areaPoint, nextZomm)
      //清除当前覆盖物
      setTimeout(() => {
        this.map.clearOverlays()
      }, 0)
    })
    this.map.addOverlay(label)
  }

  //创建小区覆盖物
  createRect = (areaPoint, areaName, value, count) => {
    //创建文本标注对象
    var label = new window.BMapGL.Label('', {
      position: areaPoint, // 指定文本标注所在的地理位置
      offset: new window.BMapGL.Size(-50, -28), // 设置文本偏移量
    })

    //设置房源覆盖物内容
    label.id = value

    //设置房源覆盖物内容
    label.setContent(`
         <div class="${styles.rect}">
           <span class="${styles.housename}">${areaName}</span>
           <span class="${styles.housenum}">${count}套</span>
           <i class="${styles.arrow}"></i>
         </div>
       `)

    // 自定义文本标注样式
    label.setStyle(labelStyle)
    //添加点击事件
    label.addEventListener('click', (e) => {
      this.getHouseList(value)

      //获取被点击项
      const target = e.domEvent.changedTouches[0]
      //被点击项居中显示
      this.map.panBy(
        window.innerWidth / 2 - target.clientX,
        (window.innerHeight - 330) / 2 - target.clientY
      )
    })
    this.map.addOverlay(label)
  }

  //获取小区房源数据
  getHouseList = async (id) => {
    try {
      //开启Loading
      Toast.loading('Loading...', 0, null, false)
      const res = await API.get('/houses', {
        params: {
          cityId: id,
        },
      })
      //关闭Loading
      Toast.hide()
      this.setState({
        housesList: res.data.body.list,
        isShowList: true,
      })
    } catch (error) {
      //关闭Loading
      Toast.hide()
    }
  }

  //计算类型和缩放级别
  //区   ->11  范围 >=10 < 12
  //镇   ->13  范围 >=12 < 14
  //小区 ->15  范围 >=14 < 16
  getTypeAndZoom = () => {
    //获取地图的zoom
    const zoom = this.map.getZoom()
    //区 绘制图形
    let nextZomm, type
    if ((zoom >= 10) & (zoom < 12)) {
      //区
      //绘制图形
      type = 'circle'
      //下一个缩放级别
      nextZomm = 13
    } else if ((zoom >= 12) & (zoom < 14)) {
      //镇
      //绘制图形
      type = 'circle'
      //下一个缩放级别
      nextZomm = 15
    } else if ((zoom >= 14) & (zoom < 16)) {
      //小区
      //绘制图形
      type = 'rect'
    }
    return { nextZomm, type }
  }

  //渲染小区房源数据
  renderHousesList = () => {
    return (
      <div
        className={[
          styles.houseList,
          this.state.isShowList ? styles.show : '',
        ].join(' ')}
      >
        {/* 房屋列表-标题 */}
        <div className={styles.titleWrap}>
          <h1 className={styles.listTitle}>房屋列表</h1>
          <Link className={styles.titleMore} to="/home/list">
            更多房源
          </Link>
        </div>

        {/* 房屋列表-内容 */}
        <div className={styles.houseItems}>
          {this.state.housesList.map((item) => (
            <HouseItem
              key={item.houseCode}
              src={BASE_URL + item.houseImg}
              title={item.title}
              desc={item.desc}
              tags={item.tags}
              price={item.price}
            ></HouseItem>
          ))}
        </div>
      </div>
    )
  }

  componentDidMount() {
    this.initMap()
  }

  render() {
    return (
      <div className={styles.map}>
        {/* 导航栏 */}
        <NavHeader title="地图找房"></NavHeader>
        {/* 地图容器元素 */}
        <div id="container" className={styles.container} />
        {/* 小区房源数据 */}
        {this.renderHousesList()}
      </div>
    )
  }
}
